<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="sass/css/common.css" />
		<link rel="stylesheet" href="sass/css/detail.css" />
		<link rel="shortcut icon" href="favicon.ico" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="topBanner">
			<div class="bannerinner">
				<a href="javascript:;">
					<img src="detailImgs/1200100.jpg" alt="" />
				</a>
			</div>
		</div>

		<div class="topbar">
			<div class="topbarinner">
				<!--登陆-->
				<div class="userLogin">
					<b style="float: left;">欢迎光临中国图书网</b>
					<div class="unlogin" style="float: left;">
						<a href="login.html">登陆</a>
						<span>|</span>
						<a href="register.html" target="_blank">注册</a>
					</div>
					<div class="logined" style="display: none; float: left;">
						<a href="#javascript:;" id="userLoginedId">xx</a>
						<a href="#javascript:;" id="quitLogin">安全退出</a>
					</div>
				</div>
				<!--用户购物车订单-->
				<div class="userTool">
					<ul class="clear_fix">
						<li>
							<div class="dt">
								<a href="shopCart.html" target="_blank">购物车</a>
							</div>
						</li>
						<li>
							<div class="dt">
								<a href="javascript:;">我的订单</a>
							</div>
						</li>
						<li class="drop">
							<div class="dt">
								<a href="javascript:;">我的账户</a><i></i>
							</div>
							<div class="dropLayer">
								<a href="javascript:;">我的收藏夹</a>
								<a href="javascript:;">账户余额</a>
								<a href="javascript:;">我的优惠券</a>
								<a href="javascript:;">我的积分</a>
								<a href="javascript:;">收货地址</a>
								<a href="javascript:;">我的书评</a>
								<a href="javascript:;">我的消息</a>
								<a href="javascript:;">积分换券</a>
							</div>
						</li>
						<li>
							<div class="dt">
								<a href="javascript:;">帮助中心</a>
							</div>
						</li>
						<li class="drop">
							<div class="dt">
								<a href="javascript:;">手机中图</a><i></i>
							</div>
							<div class="dropLayer" style="right: 0;left: initial;width: 164px;padding-bottom: 7px;padding-left: 5px;">
								<div class="erweimaWrap">
									<div class="erweima">
										<img src="images/weiboerweima.jpg" alt="" />
									</div>
									<div class="text">
										<b>扫一扫</b>
										<span>
											关注中图网
											<br />
											官方微博
										</span>
									</div>
								</div>
								<div class="erweimaWrap">
									<div class="erweima">
										<img src="images/weixinerweima.jpg" alt="" />
									</div>
									<div class="text">
										<b>扫一扫</b>
										<span>
											关注中图网
											<br />
											微信公众号
										</span>
									</div>
								</div>
								<div class="erweimaWrap">
									<div class="erweima">
										<img src="images/phoneerweima.jpg" alt="" />
									</div>
									<div class="text">
										<b>扫一扫</b>
										<span>
											手机中图
											<br />
											手机触屏版
										</span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var unlogin = document.querySelector(".unlogin");
			var logined = document.querySelector(".logined");
			var userLoginedId = document.querySelector("#userLoginedId")
			var quitLogin = document.querySelector("#quitLogin");
			//关于登陆成功显示用户名字的js
			//  	var uid = Cookie.getCookie("token");
			//		var user = Cookie.getCookie("username");
			var uid = jQuery.cookie("token");
			console.log(uid)
			var user = jQuery.cookie("username");
			if(user) {
				unlogin.style.display = "none"
				logined.style.display = "block";
				userLoginedId.innerHTML = user;
				userLoginedId.style.color = "#0365b9";

			}
			quitLogin.onclick = function() {
				console.log(1)
				jQuery.cookie('token', null, {
					expires: -1,
					path: '/'
				});

				//			      	   	   Cookie.setCookie("token",res.data.id,30,"/");
				jQuery.cookie('username', null, {
					expires: -1,
					path: '/'
				});
				location.reload()

			}
		</script>
		<div class="searchBar">
			<div class="searchInner">
				<div class="logo">
					<a href="javascript:;">
						<img src="images/logo0508.png" alt="" />
					</a>
				</div>
				<!--搜索框-->
				<div class="searchArea">

					<div class="clear_fix">
						<div class="searchForm clear_fix">
							<span class="inputWrap">
	    					<input type="text" />
	    				    </span>
							<a href="javascript:;" class="searchBtn">搜索</a>
							<!--搜索框里面的选项卡-->
							<div class="dropSearch">
								<dl>
									<dt>
                                 		<span>
                                 		搜索全部
                                 		<b class="icon"></b>
                                 		</span>
                                 	</dt>
									<dd></dd>
								</dl>
							</div>
						</div>
						<div class="moreSearch">
							<a href="javascript:;">高级搜索</a>
						</div>

					</div>
					<div class="hotword">
						<a href="javascript:;">禅与摩托车维修艺术-珍藏版</a>
						<a href="javascript:;">话本小说史-孤本秘籍拾遗沥金</a>
						<a href="javascript:;">中国文库</a>
						<a href="javascript:;">汉族丧葬祭仪旧俗谭</a>

					</div>
				</div>

				<div class="notice">
					<div class="noticeWrap">
						<ul class="clear_fix topLunbo">
							<li>
								<a href="javascript:;">每日签到抽红包</a>
							</li>
							<li>
								<a class="red" href="javascript:;">新用户注册即送5元!首单成功再返10元!</a>
							</li>
							<li>
								<a href="javascript:;">每日签到抽红包</a>
							</li>
							<li>
								<a class="red" href="javascript:;">新用户注册即送5元!首单成功再返10元!</a>
							</li>
						</ul>

					</div>
					<span class="icon"></span>
				</div>
			</div>
		</div>

		<div id="nav">
			<div class="navInner">
				<div class="navContent clear_fix">
					<div class="allgoods">
						<h2>
	           	     	  	  	图书分类
	           	     	  	  	<b></b>
	           	     	  	  </h2>
						<div id="webCategory" class="category">
							<div class="categoryInner">
								<ul class="category-list">
									<li class="catli">
										<div class="category-info">
											<h3 class="category-name">
	           	     	  	  	   	      				<a href="javascript:;">文学</a>
	           	     	  	  	   	      			</h3>
											<p class="c-category-list">
												<a href="javascript:;">小说</a>
												<a href="javascript:;">青春文学</a>
												<a href="javascript:;">中国散文</a>
												<a href="javascript:;">外国散文</a>
												<a href="javascript:;">悬疑推理</a>
												<a href="javascript:;">文学理论</a>
												<a href="javascript:;">文集</a>
												<a href="javascript:;">世界名著</a>
											</p>
											<em>></em>
										</div>
										<div class="menu-item" style="top: -2px;display: none;">
											<div class="area_bg">
												<ul class="sublist clear_fix">
													<li class="sublistin">
														<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">小说</a>
	           	     	  	  	   	      						</h3>
														<p class="mcate-item-bd">
															<a href="javascript:;">外国小说</a>
															<span>|</span>
															<a href="javascript:;">中国当代小说</a>
															<span>|</span>
															<a href="javascript:;">中国古典小说</a>
															<span>|</span>
															<a href="javascript:;">中国近代小说</a>
															<span>|</span>
															<a href="javascript:;">悬疑推理</a>
															<span>|</span>
															<a href="javascript:;">科幻小说</a>
															<span>|</span>
															<a href="javascript:;">世界名著</a>
															<span>|</span>
															<a href="javascript:;">四大名著</a>
															<span>|</span>
															<a href="javascript:;">作品集</a>
															<span>|</span>
															<a href="javascript:;">更多</a>

														</p>
													</li>
													<li class="sublistin">
														<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">文学</a>
	           	     	  	  	   	      						</h3>
														<p class="mcate-item-bd">
															<a href="javascript:;">外国诗歌</a>
															<span>|</span>
															<a href="javascript:;">中国古诗词</a>
															<span>|</span>
															<a href="javascript:;">中国现代诗歌</a>
															<span>|</span>
															<a href="javascript:;">外国散文</a>
															<span>|</span>
															<a href="javascript:;">中国现代散文</a>
															<span>|</span>
															<a href="javascript:;">中国古代散文</a>
															<span>|</span>
															<a href="javascript:;">文学理论</a>
															<span>|</span>
															<a href="javascript:;">文集</a>
															<span>|</span>
															<a href="javascript:;">戏剧</a>
															<span>|</span>
															<a href="javascript:;">更多</a>

														</p>
													</li>
													<li class="sublistin">
														<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">青春文学</a>
	           	     	  	  	   	      						</h3>
														<p class="mcate-item-bd">
															<a href="javascript:;">玄幻/科幻</a>
															<span>|</span>
															<a href="javascript:;">悬疑/惊悚</a>
															<span>|</span>
															<a href="javascript:;">叛逆/成长</a>
															<span>|</span>
															<a href="javascript:;">报销/无厘头</a>
															<span>|</span>
															<a href="javascript:;">校园</a>
															<span>|</span>
															<a href="javascript:;">港台青春文学</a>
															<span>|</span>
															<a href="javascript:;">外国青春文学</a>
															<span>|</span>
															<a href="javascript:;">更多</a>

														</p>
													</li>
												</ul>
											</div>
										</div>
									</li>

									<li class="catli">
										<div class="category-info">
											<h3 class="category-name">
	           	     	  	  	   	      				<a href="javascript:;">社科</a>
	           	     	  	  	   	      			</h3>
											<p class="c-category-list">
												<a href="javascript:;">历史</a>
												<a href="javascript:;">哲学/宗教</a>
												<a href="javascript:;">社会学科</a>
												<a href="javascript:;">政治军事</a>
												<a href="javascript:;">传记</a>
												<a href="javascript:;">文学</a>
												<a href="javascript:;">古籍</a>
												<a href="javascript:;">经济</a>
												<a href="javascript:;">成功励志</a>
												<a href="javascript:;">法律</a>
												<a href="javascript:;">语言文字</a>

											</p>
											<em>></em>
											<div class="menu-item" style="top: -115.46px;display: none;">
												<div class="area_bg">
													<ul class="sublist clear_fix">
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">历史</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">中国史</a>
																<span>|</span>
																<a href="javascript:;">世界史</a>
																<span>|</span>
																<a href="javascript:;">地方史志</a>
																<span>|</span>
																<a href="javascript:;">历史知识读物</a>
																<span>|</span>
																<a href="javascript:;">历史典籍</a>
																<span>|</span>
																<a href="javascript:;">史学理论</a>
																<span>|</span>
																<a href="javascript:;">参考文物</a>
																<span>|</span>
																<a href="javascript:;">民族史志</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">政治/哲学</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">政治</a>
																<span>|</span>
																<a href="javascript:;">军事</a>
																<span>|</span>
																<a href="javascript:;">中国政治</a>
																<span>|</span>
																<a href="javascript:;">国际政治</a>
																<span>|</span>
																<a href="javascript:;">外交/国际关系</a>
																<span>|</span>
																<a href="javascript:;">哲学</a>
																<span>|</span>
																<a href="javascript:;">宗教</a>
																<span>|</span>
																<a href="javascript:;">美学</a>
																<span>|</span>
																<a href="javascript:;">哲学知识读物</a>
																<span>|</span>
																<a href="javascript:;">中国古代哲学</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">传记</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">历代帝王</a>
																<span>|</span>
																<a href="javascript:;">历史人物</a>
																<span>|</span>
																<a href="javascript:;">科学家</a>
																<span>|</span>
																<a href="javascript:;">体育明星</a>
																<span>|</span>
																<a href="javascript:;">文学家</a>
																<span>|</span>
																<a href="javascript:;">学者</a>
																<span>|</span>
																<a href="javascript:;">艺术家</a>
																<span>|</span>
																<a href="javascript:;">文娱明星</a>
																<span>|</span>
																<a href="javascript:;">政治人物</a>
																<span>|</span>
																<a href="javascript:;">自传</a>
																<span>|</span>
																<a href="javascript:;">更多</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">文化</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">世界文化</a>
																<span>|</span>
																<a href="javascript:;">中国民俗文化</a>
																<span>|</span>
																<a href="javascript:;">地域文化</a>
																<span>|</span>
																<a href="javascript:;">中国文化</a>
																<span>|</span>
																<a href="javascript:;">文化理论</a>
																<span>|</span>
																<a href="javascript:;">文化评述</a>
																<span>|</span>
																<a href="javascript:;">神秘现象</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">社会学科</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">心理学</a>
																<span>|</span>
																<a href="javascript:;">人类学</a>
																<span>|</span>
																<a href="javascript:;">教育</a>
																<span>|</span>
																<a href="javascript:;">社会学</a>
																<span>|</span>
																<a href="javascript:;">新闻传播出版</a>
																<span>|</span>
																<a href="javascript:;">语言文字</a>

																<a href="javascript:;">更多</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">古籍</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">古籍整理</a>
																<span>|</span>
																<a href="javascript:;">经部</a>
																<span>|</span>
																<a href="javascript:;">史类</a>
																<span>|</span>
																<a href="javascript:;">子部</a>
																<span>|</span>
																<a href="javascript:;">集部</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">经济/管理</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">经济理论</a>
																<span>|</span>
																<a href="javascript:;">中国经济</a>
																<span>|</span>
																<a href="javascript:;">国际经济</a>
																<span>|</span>
																<a href="javascript:;">经济通俗读物</a>
																<span>|</span>
																<a href="javascript:;">保险</a>
																<span>|</span>
																<a href="javascript:;">会计</a>
																<span>|</span>
																<a href="javascript:;">经融投资</a>
																<span>|</span>
																<a href="javascript:;">市场营销</a>
																<span>|</span>
																<a href="javascript:;">管理学</a>
																<span>|</span>
																<a href="javascript:;">电子商务</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">成功励志</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">口才演讲</a>
																<span>|</span>
																<a href="javascript:;">成功激励</a>
																<span>|</span>
																<a href="javascript:;">名人励志</a>
																<span>|</span>
																<a href="javascript:;">人际交往</a>
																<span>|</span>
																<a href="javascript:;">人生哲学</a>
																<span>|</span>
																<a href="javascript:;">心灵修养</a>
																<span>|</span>
																<a href="javascript:;">性格习惯</a>
																<span>|</span>
																<a href="javascript:;">更多</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">法律</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">法的理论</a>
																<span>|</span>
																<a href="javascript:;">法律法规</a>
																<span>|</span>
																<a href="javascript:;">国际法</a>
																<span>|</span>
																<a href="javascript:;">经济法</a>
																<span>|</span>
																<a href="javascript:;">更多</a>

															</p>
														</li>
													</ul>
												</div>
											</div>
										</div>

									</li>
									<li class="catli">
										<div class="category-info">
											<h3 class="category-name">
	           	     	  	  	   	      				<a href="javascript:;">少儿</a>
	           	     	  	  	   	      			</h3>
											<p class="c-category-list">
												<a href="javascript:;">中国儿童文学</a>
												<a href="javascript:;">外国儿童文学</a>
												<a href="javascript:;">科普读物</a>
												<a href="javascript:;">绘本</a>
												<a href="javascript:;">动漫/卡通</a>
												<a href="javascript:;">幼儿启蒙</a>

											</p>
											<em>></em>
											<div class="menu-item" style="top: -64px;display: none;">
												<div class="area_bg">
													<ul class="sublist clear_fix">
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">儿童文学</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">中国儿童文学</a>
																<span>|</span>
																<a href="javascript:;">外国儿童文学</a>
																<span>|</span>
																<a href="javascript:;">童话</a>
																<span>|</span>
																<a href="javascript:;">小说</a>
																<span>|</span>
																<a href="javascript:;">寓言传说</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">绘本</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">动漫/卡通</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">科普百科</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">科普</a>
																<span>|</span>
																<a href="javascript:;">百科</a>
																<span>|</span>
																<a href="javascript:;">历史读物</a>
																<span>|</span>
																<a href="javascript:;">生活常识</a>
																<span>|</span>
																<a href="javascript:;">益智游戏</a>
																<span>|</span>
																<a href="javascript:;">文化传统</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">其他</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">幼儿启蒙</a>
																<span>|</span>
																<a href="javascript:;">少儿英语</a>
																<span>|</span>
																<a href="javascript:;">历史/成长</a>
																<span>|</span>
																<a href="javascript:;">艺术课堂</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">年龄馆</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">0-2岁</a>
																<span>|</span>
																<a href="javascript:;">3-6岁</a>
																<span>|</span>
																<a href="javascript:;">7岁及以上</a>

															</p>
														</li>
													</ul>
												</div>
											</div>
										</div>

									</li>

									<li class="catli">
										<div class="category-info">
											<h3 class="category-name">
	           	     	  	  	   	      				<a href="javascript:;">艺术</a>
	           	     	  	  	   	      			</h3>
											<p class="c-category-list">
												<a href="javascript:;">绘画</a>
												<a href="javascript:;">书法篆刻</a>
												<a href="javascript:;">艺术理论</a>
												<a href="javascript:;">摄影</a>
												<a href="javascript:;">音乐</a>

											</p>
											<em>></em>
											<div class="menu-item" style="top: -139px;display: none;">
												<div class="area_bg">
													<ul class="sublist clear_fix">
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">绘画</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">绘画理论</a>
																<span>|</span>
																<a href="javascript:;">国画</a>
																<span>|</span>
																<a href="javascript:;">油画</a>
																<span>|</span>
																<a href="javascript:;">素描速写</a>
																<span>|</span>
																<a href="javascript:;">水粉笔墨</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">书法篆刻</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">碑帖</a>
																<span>|</span>
																<a href="javascript:;">技法教程</a>
																<span>|</span>
																<a href="javascript:;">书法理论</a>
																<span>|</span>
																<a href="javascript:;">硬笔书法</a>
																<span>|</span>
																<a href="javascript:;">字帖</a>
																<span>|</span>
																<a href="javascript:;">篆刻</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">摄影/设计</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">设计</a>
																<span>|</span>
																<a href="javascript:;">摄影后期</a>
																<span>|</span>
																<a href="javascript:;">摄影教程</a>
																<span>|</span>
																<a href="javascript:;">摄影理论</a>
																<span>|</span>
																<a href="javascript:;">摄影器材</a>
																<span>|</span>
																<a href="javascript:;">数码摄影</a>
																<span>|</span>
																<a href="javascript:;">作品集</a>
															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">舞台影视艺术</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">设计</a>
																<span>|</span>
																<a href="javascript:;">摄影后期</a>
																<span>|</span>
																<a href="javascript:;">摄影教程</a>
																<span>|</span>
																<a href="javascript:;">摄影理论</a>
																<span>|</span>
																<a href="javascript:;">摄影器材</a>
																<span>|</span>
																<a href="javascript:;">数码摄影</a>
																<span>|</span>
																<a href="javascript:;">作品集</a>
															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">音乐</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">设计</a>
																<span>|</span>
																<a href="javascript:;">摄影后期</a>
																<span>|</span>
																<a href="javascript:;">摄影教程</a>
																<span>|</span>
																<a href="javascript:;">摄影理论</a>
																<span>|</span>
																<a href="javascript:;">摄影器材</a>
																<span>|</span>
																<a href="javascript:;">数码摄影</a>
																<span>|</span>
																<a href="javascript:;">作品集</a>
															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">收藏鉴赏</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">设计</a>
																<span>|</span>
																<a href="javascript:;">摄影后期</a>
																<span>|</span>
																<a href="javascript:;">摄影教程</a>
																<span>|</span>
																<a href="javascript:;">摄影理论</a>
																<span>|</span>
																<a href="javascript:;">摄影器材</a>
																<span>|</span>
																<a href="javascript:;">数码摄影</a>
																<span>|</span>
																<a href="javascript:;">作品集</a>
															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">更多</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">设计</a>
																<span>|</span>
																<a href="javascript:;">摄影后期</a>
																<span>|</span>
																<a href="javascript:;">摄影教程</a>
																<span>|</span>
																<a href="javascript:;">摄影理论</a>
																<span>|</span>
																<a href="javascript:;">摄影器材</a>
																<span>|</span>
																<a href="javascript:;">数码摄影</a>
																<span>|</span>
																<a href="javascript:;">作品集</a>
															</p>
														</li>
													</ul>
												</div>
											</div>
										</div>

									</li>
									<li class="catli">
										<div class="category-info">
											<h3 class="category-name">
	           	     	  	  	   	      				<a href="javascript:;">生活</a>
	           	     	  	  	   	      			</h3>
											<p class="c-category-list">
												<a href="javascript:;">美食</a>
												<a href="javascript:;">保健/心理健康</a>
												<a href="javascript:;">旅游</a>
												<a href="javascript:;">家庭教育</a>
												<a href="javascript:;">家具休闲</a>

											</p>
											<em>></em>
											<div class="menu-item" style="bottom: -100.8px;display: none;">
												<div class="area_bg">
													<ul class="sublist clear_fix">
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">儿童文学</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">中国儿童文学</a>
																<span>|</span>
																<a href="javascript:;">外国儿童文学</a>
																<span>|</span>
																<a href="javascript:;">童话</a>
																<span>|</span>
																<a href="javascript:;">小说</a>
																<span>|</span>
																<a href="javascript:;">寓言传说</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">绘本</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">动漫/卡通</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">科普百科</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">科普</a>
																<span>|</span>
																<a href="javascript:;">百科</a>
																<span>|</span>
																<a href="javascript:;">历史读物</a>
																<span>|</span>
																<a href="javascript:;">生活常识</a>
																<span>|</span>
																<a href="javascript:;">益智游戏</a>
																<span>|</span>
																<a href="javascript:;">文化传统</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">其他</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">幼儿启蒙</a>
																<span>|</span>
																<a href="javascript:;">少儿英语</a>
																<span>|</span>
																<a href="javascript:;">历史/成长</a>
																<span>|</span>
																<a href="javascript:;">艺术课堂</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">年龄馆</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">0-2岁</a>
																<span>|</span>
																<a href="javascript:;">3-6岁</a>
																<span>|</span>
																<a href="javascript:;">7岁及以上</a>

															</p>
														</li>
													</ul>
												</div>
											</div>
										</div>

									</li>
									<li class="catli">
										<div class="category-info">
											<h3 class="category-name">
	           	     	  	  	   	      				<a href="javascript:;">文教</a>
	           	     	  	  	   	      			</h3>
											<p class="c-category-list">
												<a href="javascript:;">中小学教辅</a>
												<a href="javascript:;">外语</a>
												<a href="javascript:;">教材</a>
												<a href="javascript:;">医学</a>
												<a href="javascript:;">计算机</a>
												<a href="javascript:;">自然科学</a>

											</p>
											<em>></em>
											<div class="menu-item" style="bottom: -13px;display: none;">
												<div class="area_bg">
													<ul class="sublist clear_fix">
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">儿童文学</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">中国儿童文学</a>
																<span>|</span>
																<a href="javascript:;">外国儿童文学</a>
																<span>|</span>
																<a href="javascript:;">童话</a>
																<span>|</span>
																<a href="javascript:;">小说</a>
																<span>|</span>
																<a href="javascript:;">寓言传说</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">绘本</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">动漫/卡通</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">科普百科</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">科普</a>
																<span>|</span>
																<a href="javascript:;">百科</a>
																<span>|</span>
																<a href="javascript:;">历史读物</a>
																<span>|</span>
																<a href="javascript:;">生活常识</a>
																<span>|</span>
																<a href="javascript:;">益智游戏</a>
																<span>|</span>
																<a href="javascript:;">文化传统</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">其他</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">幼儿启蒙</a>
																<span>|</span>
																<a href="javascript:;">少儿英语</a>
																<span>|</span>
																<a href="javascript:;">历史/成长</a>
																<span>|</span>
																<a href="javascript:;">艺术课堂</a>

															</p>
														</li>
														<li class="sublistin">
															<h3 class="mcate-item-hd">
	           	     	  	  	   	      							<a href="javascript:;">年龄馆</a>
	           	     	  	  	   	      						</h3>
															<p class="mcate-item-bd">
																<a href="javascript:;">0-2岁</a>
																<span>|</span>
																<a href="javascript:;">3-6岁</a>
																<span>|</span>
																<a href="javascript:;">7岁及以上</a>

															</p>
														</li>
													</ul>
												</div>
											</div>
										</div>

									</li>
								</ul>
								<div class="all_category">
									<a href="javascript:;">全部商品分类>></a>
								</div>
							</div>

						</div>
					</div>
					<ul class="clear_fix specil_category">
						<li class="cur">
							<a href="javascript:;">首页</a>
						</li>
						<li>
							<a href="javascript:;">淘书团</a>
						</li>
						<li>
							<a href="javascript:;">畅销榜</a>
						</li>
						<li class="fiveStar">
							<a href="javascript:;">五星书</a>
						</li>
						<li>
							<a href="javascript:;">新上架</a>
						</li>
						<li>
							<a href="javascript:;">9块9包邮</a>
						</li>
						<li>
							<a href="javascript:;">出版社浏览</a>
						</li>
						<li>
							<a href="javascript:;">闲情雅趣</a>
						</li>
						<li>
							<a href="javascript:;">批发</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var allgoods = document.querySelector(".allgoods");
			var webCategory = document.querySelector("#webCategory");
			allgoods.onmouseenter = function() {
				webCategory.style.display = "block";
			}
			allgoods.onmouseleave = function() {
				webCategory.style.display = "none";
			}
			webCategory.onmouseleave = function() {
				this.style.display = "none"
			}
			//图书分类的移入效果
			//拿到所有的li
			var category_list = document.querySelectorAll(".category-list .catli");
			var menu_item = document.querySelectorAll(".menu-item");
			console.log(menu_item)
			console.log(category_list)
			for(let i = 0; i < category_list.length; i++) {
				category_list[i].onmouseenter = function() {
					for(let j = 0; j < category_list.length; j++) {
						category_list[j].className = "cateli";
					}
					this.className = "cateli hover";

					menu_item[i].style.display = "block";

				}
				category_list[i].onmouseleave = function() {
					menu_item[i].style.display = "none";
					this.className = "cateli ";
				}
			}
		</script>

		<div class="content">
			<div class="w1200 clear_fix">
				<div class="crumbsBar">
					<div class="crumbsNav clear_fix">
						<div class="crumsItem">
							<a href="index.html">中国图书网</a>
						</div>
						<i>></i>
						<div class="crumsItem">
							<a href="javascript:;" id="name">韩兆琦《史记》新读</a>
						</div>
					</div>
				</div>
			</div>
			<div class="w1200">
				<div class="bookInfoWrap clear_fix">
					<!--<div class="bookDetaiWrap">
		      			<div class="bookCover">
		      				<div class="coverImg">
		      					<img src="http://image31.bookschina.com/2017/zuo/11/B2400977.jpg" alt="" class="bookCoverImg"/>
		      					<div class="activeIcon">
		      						<img src="detailImgs/bookdetailactiveicon.png" alt="" />
		      					</div>
		      					<span class="bigIconTip"></span>
		      				</div>
		      				<div class="bdsharebuttonbox">
		      					<a href="javascript:;">分享</a>
		      				</div>
		      			</div>
		      		    <div class="bookInfo">
		      		    	<div class="padLeft10">
		      		    		<h1>韩兆琦《史记》新读</h1>
		      		    		<p class="recomand">在编排时充分保持讲座原汁原味的特点；另外在此基础上，于每一讲讲稿之后附上了历代对所讲主要人物或相关人物的评价与相关诗歌，以助读者深入理解讲稿内容。</p>
		      		    	    <div class="author">
		      		    	    	<span>作者:</span>
		      		    	    	<a href="javascript:;">xxxx</a>
		      		    	    </div>
		      		    	    <div class="publisher">
		      		    	    	<span>出版社：</span>
		      		    	    	<a href="javascript:;">哔哩哔哩出版社</a>
		      		    	    	<span>出版时间：</span>
		      		    	    	<i>2015-02-08</i>
		      		    	    </div>
		      		    	    <div class="otherInfor">
		      		    	    	<span>开本:</span>
		      		    	    	<em>16开</em>
		      		    	    	<span>页数：</span>
		      		    	    	<i>233</i>
		      		    	    </div>
		      		    	    <div class="starWrap">
		      		    	    	<span>读者评分:</span>
		      		    	    	<em>4.6分</em>
		      		    	    	<i class="one"></i>
		      		    	    	<i class="one"></i>
		      		    	    	<i class="one"></i>
		      		    	    	<i class="one"></i>
		      		    	    	<i class="half"></i>
		      		    	    	<a href="javascript:;">107条评论</a>
		      		    	    </div>
		      		    	    <div class="range">
		      		    	    	<span>排名：</span>
		      		    	    	<a href="javascript:;">历史销量榜</a>
		      		    	    	<b>第<i>1</i>位</b>
		      		    	    </div>
		      		    	</div>
		      		        <div class="priceWrap">
		      		        	<span class="sellPriceTit">一 星 价</span>
		      		        	<span  class="sellPrice"><i>¥</i>9.9</span>
		      		            <span class="priceTit">定价:</span>
		      		            <del class="price">¥22.0</del>
		      		        </div>
		      		        <div class="activity">
		      		        	<span class="activitytit">
		      		        		促销活动:
		      		        	</span>
		      		        	<div class="activeItemWrap">
		      		        		<a href="javascript:;">全场折上8.8折|满88元送福猪图一对</a>
		      		        		<a href="javascript:;" style="background-color: #E60000;">包邮</a>
		      		        	</div>
		      		        </div>
		      		        <div class="oparateButton clear_fix">
		      		        	<a href="javascript:;" class="buyButton">加入购物车</a>
		      		        	<a href="javascript:;" class="collectBtn">收藏</a>
		      		        </div>
		      		    </div>
		      		</div>-->
				</div>
			</div>
		</div>

		<div class="popMask">

		</div>
		<div class="popMain popBig">
			<div class="popContent">
				<div class="popBigWrap">
					<div class="popBigInner">
						<img class="smallimg" src="http://image31.bookschina.com/2018/zuo/11/1385805.jpg" style="max-width: 100%;height: 374px;" />
						<img class="bigimg" src="http://image31.bookschina.com/2018/zuo/11/1385805.jpg" style="position: absolute; top: 0px; left: 0px; opacity: 0; width: 337px; height: 500px; border: none; max-width: none;" />
					</div>
					<span class="close" id="closeBtn">×</span>
				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		//商品详情接口
		//拿到对应商品的id
		var pid = getId("pid")
		var url = "http://jx.xuzhixiang.top/ap/api/detail.php?id=" + pid
		//		console.log(url)
		$.ajax({
			type: "get",
			url: url,
			async: true,
			success: function(res) {
				var res = JSON.parse(res);
				console.log(res.data.pid)
				var pdesc = JSON.parse(res.data.pdesc)
				console.log(pdesc)
				var bookInfoWrap = document.querySelector(".bookInfoWrap");
				var html = "";
				html += `<div class="bookDetaiWrap">
		      			    <div class="bookCover">
		      				<div class="coverImg">
		      					<img src=${res.data.pimg} alt="" class="bookCoverImg"/>
		      					<div class="activeIcon">
		      						<img src="detailImgs/bookdetailactiveicon.png" alt="" />
		      					</div>
		      					<span class="bigIconTip"></span>
		      				</div>
		      				<div class="bdsharebuttonbox">
		      					<a href="javascript:;">分享</a>
		      				</div>
		      			</div>
		      		    <div class="bookInfo">
		      		    	<div class="padLeft10">
		      		    		<h1>${res.data.pname}</h1>
		      		    		<p class="recomand">${pdesc.desp}</p>
		      		    	    <div class="author">
		      		    	    	<span>作者:</span>
		      		    	    	<a href="javascript:;">${pdesc.author}</a>
		      		    	    </div>
		      		    	    <div class="publisher">
		      		    	    	<span>出版社：</span>
		      		    	    	<a href="javascript:;">${pdesc.publisher}</a>
		      		    	    	<span>出版时间：</span>
		      		    	    	<i>${pdesc.pubTime}</i>
		      		    	    </div>
		      		    	    <div class="otherInfor">
		      		    	    	<span>开本:</span>
		      		    	    	<em>${pdesc.open}</em>
		      		    	    	<span>页数：</span>
		      		    	    	<i>${pdesc.pageNum}</i>
		      		    	    </div>
		      		    	    <div class="starWrap">
		      		    	    	<span>读者评分:</span>
		      		    	    	<em>4.6分</em>
		      		    	    	<i class="one"></i>
		      		    	    	<i class="one"></i>
		      		    	    	<i class="one"></i>
		      		    	    	<i class="one"></i>
		      		    	    	<i class="half"></i>
		      		    	    	<a href="javascript:;">107条评论</a>
		      		    	    </div>
		      		    	    <div class="range">
		      		    	    	<span>排名：</span>
		      		    	    	<a href="javascript:;">历史销量榜</a>
		      		    	    	<b>第<i>${pdesc.range}</i>位</b>
		      		    	    </div>
		      		    	</div>
		      		        <div class="priceWrap">
		      		        	<span class="sellPriceTit">一 星 价</span>
		      		        	<span  class="sellPrice"><i>¥</i>${pdesc.nowprice}</span>
		      		            <span class="priceTit">定价:</span>
		      		            <del class="price">¥${pdesc.oldprice}</del>
		      		        </div>
		      		        <div class="activity">
		      		        	<span class="activitytit">
		      		        		促销活动:
		      		        	</span>
		      		        	<div class="activeItemWrap">
		      		        		<a href="javascript:;">全场折上8.8折|满88元送福猪图一对</a>
		      		        		<a href="javascript:;" style="background-color: #E60000;">包邮</a>
		      		        	</div>
		      		        </div>
		      		        <div class="oparateButton clear_fix">
		      		        	<a href="javascript:;" class="buyButton">加入购物车</a>
		      		        	<a href="javascript:;" class="collectBtn">收藏</a>
		      		        </div>
		      		    </div>
		      		</div>`
				bookInfoWrap.innerHTML = html;
				var name = document.querySelector("#name");
				name.innerHTML = res.data.pname

				//点击事件
				var coverImg = document.querySelector(".coverImg");
				var popMask = document.querySelector(".popMask");
				var popMain = document.querySelector(".popMain");

				var smallimg = document.querySelector(".smallimg");
				var bigimg = document.querySelector(".bigimg")
				smallimg.onclick = function() {

				}

				coverImg.onclick = function() {

					popMask.style.display = "block";
					popMain.style.display = "block";

				}
				var closeBtn = document.querySelector("#closeBtn");
				closeBtn.onclick = function() {
					popMask.style.display = "none";
					popMain.style.display = "none";
				}

				//				加入购物车事件
				var buyButton = document.querySelector(".buyButton");
				buyButton.onclick = function() {
//					http://jx.xuzhixiang.top/ap/api/add-product.php?uid=1&pid=1&pnum=1
					var url1 ="http://jx.xuzhixiang.top/ap/api/add-product.php?uid="+uid+"&pid="+res.data.pid+"&pnum=1";
//                  var url1 = "http://jx.xuzhixiang.top/ap/api/cart-list.php?id=12"
//                  var url1 = "http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=12&pid=9403"
					console.log(url1)
					$.ajax({
						type:"get",
						url:url1,
						async:true,
						success:function(res1){
							var res1 = JSON.parse(res1);
							console.log(res1)
						}
					});
				}
			}
		});
	</script>


</html>